<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态发布系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" href="image/icon/favicon.ico">
    <style>
        .picCon{
            overflow: hidden;       /*防止div被图片撑大*/
        }
    </style>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">是否删除该动态</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="deletedy" type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<div  class="container" style="width: 100%">
    <div class="row clearfix">
        <div class="col-sm-12 column">
            <ul class="nav nav-tabs">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./find.html">朋友圈</a>
                </li>
                <li>
                    <a href="./message.html" id="nrmes">消息</a>
                </li>
                <li >
                    <a href="./square.html" >广场</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container" style="min-height: 325px;background-color: #F5F5F5">
    <div class="row clearfix" style="padding-right: 15px">
        <div class="col-sm-12 column" style="background-color: #F5F5F5">
            <div  id="dynamic"  style="margin-left: 0;margin-bottom: 10px;background-color: #ffffff;border-radius: 20px;visibility: hidden" class="row clearfix" >
                <div class="col-md-12 column">
                    <div class="row clearfix">
                        <div class="col-md-12 column" style="padding-right: 5%;padding-left:5% ">
                            <div style="padding: 5px">
                                <div class="row clearfix">
                                    <div class="col-xs-6 column">
                                        <img  id="headphoto" style="cursor: pointer;width: 50px;height: 50px;border-radius: 30px" src="image/hg.jpg">&nbsp;
                                        <label id="username">作者</label>
                                    </div>
                                    <div align="right" class="col-xs-6 column" style="">
                                        <div id="selfdiv" >
                                            <label id="selfonlylab" style="color: #939393">公开</label>&nbsp;&nbsp;&nbsp;
                                            <div align="center" class="btn-group">
                                                <button data-toggle="dropdown"
                                                        class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                                                <ul class="dropdown-menu" style="min-width:0px;padding: 0px">
                                                    <li  align="center" >
                                                        <a  onclick="setself(this.value)" id="selfonlybtn">仅自己可见</a>
                                                    </li>
                                                    <li>
                                                        <a  data-toggle="modal" data-target="#myModal">删除文章</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="iszhuan" style="padding: 10px">
                                <em class="glyphicon glyphicon-share-alt"></em>&nbsp;<a href="#"> @小帅啦</a>
                            </div>
                            <p id="text"></p>
                            <div align="left" id="image">

                            </div>
                            <div style="clear: both;"></div>
                            <p><label id="time" style="color: darkgray;font-size: 10px"></label></p>
                            <div class="btn-group" style="width: 100%">
                                <button id="zanbtn" style="width: 33%"  class="btn btn-default" type="button"><em class="glyphicon glyphicon-heart">
                                    &nbsp</em><span id="zan" ></span></button>
                                <button id="plbtn" style="width: 33%"  class="btn btn-default" type="button"><em class="glyphicon glyphicon-comment">
                                    &nbsp</em><span id="pl" ></span></button>
                                <button id="zhuanbtn" style="width: 33%" onclick='alert(this.value)' class="btn btn-default" type="button"><em
                                        class="glyphicon glyphicon-share-alt">&nbsp</em><span id="zhuan" ></span></button>
                            </div>
                        </div>
                    </div>
                    <div style="padding-top: 10px" align="center">
                        <h4>点赞列表</h4>
                    </div>
                </div>
                <div>
                    <table class="table">
                        <tbody id="table">

                        </tbody>
                    </table>
                </div>

                <div>
                    <ul id="page" class="pagination">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- pModal -->
<div class="modal fade" id="pModal" tabihndex="-1" role="dialog" aria-labelledby="pModalLabel">
    <div  class="modal-dialog" role="document">
        <div align="center" style="border-radius: 15px;" class="modal-content" data-dismiss="modal">
            <img id="modelimg" src="image/hg.jpg" style="max-width: 100%;border-radius: 15px;">
        </div>
    </div>
</div>
</body>
<script>
    function bb(){
        var height=0;
        $("div[name='divpic']").each(
            function(){
                if(height==0)
                    height=parseInt($(this).width()*0.8);
                $(this).height(height)
            })
        $("input[name='pic']").each(
            function(){
                var w=$(this).width();
                var h=$(this).height()
                if(h>w*0.8)
                {
                    $(this).width('100%')
                }
                else $(this).height('100%')
            })
        document.getElementById("dynamic").style.visibility= "visible"
    }
    function bian(){
        setTimeout("bb()",300)
    }
    window.onresize = function(){
        bian()
    }

    function modalimg(val){
        $('#modelimg').attr('src',val)
        $('#pModal').modal('show')
    }
    var qian="/moments"
    var page=0;
    var totalpage;
    $(function () {
        $.ajax({
            url:qian+"/loginInfo",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            async: false,
            success:function (data){
                if(data.code==200)
                {
                    var user=data.obj
                    if(user.nrmes!=0)
                    {
                        $("#nrmes").html("<span class=\"badge pull-right\">"+user.nrmes+"</span>消息")
                    }
                    getdetail()
                }
                else window.location.href="./login.html"
            },
            error:function (data){
                window.location.href="./login.html"
            }
        })
    })
    function getdetail(){
        var id=localStorage.getItem('id');
        var dyid=document.location.href.toString().replace('#',"").split('?')[1].split('=')[1];
        $.ajax({
            url:qian+"/detail/getdetail",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            data:{
                dyid:dyid
            },
            async: false,
            success:function (data){
                if(data.code==200)
                {
                    var dy=data.obj;
                    $('#headphoto').attr('src',dy.headphoto);
                    $('#headphoto').attr('onclick',"visitor("+dy.userid+")");
                    $('#selfonlybtn').val(dy.id)
                    $('#deletedy').attr('onclick',"deletedy("+dy.id+","+dy.iszhuan+")")
                    $('#username').html(dy.username)
                    $('#text').html(dy.text)
                    $('#time').html(dy.time)
                    $("#zan").html(dy.zan);
                    $("#zanbtn").val(dy.id);
                    $("#zanbtn").attr('onclick',"dianzan("+dy.id+","+dy.userid+",\""+dy.title+"\")");
                    $("#zhuan").html(dy.zhuan);
                    $("#zhuanbtn").val(dy.dyid);
                    if(dy.image!="")
                    {
                        var images=dy.image.split(",");
                        var html="<div align='left'  >"
                        for(var i=0;i<images.length;i++)
                        {
                            html+="<div <div onclick='modalimg(\""+images[i]+"\")' name='divpic' style='width: 32%;float: left;border-radius: 20px;margin: 0.5%'  class='picCon '><input type='image' name='pic' style=\"\" src=\""+images[i]+"\"></div>"
                        }
                        html+= "</div>\n";
                        $("#image").html(html);
                    }
                    if(!dy.showdetail)
                    {
                        $('#text').html("        <div align=\"center\">\n" +
                            "            <h1>\n" +
                            "                当前文章仅作者可见！\n" +
                            "            </h1>\n" +
                            "        </div>")
                        $("#image").html("");
                        $('#time').html("")
                    }
                    if(dy.userid!=id)
                    {
                        $('#selfdiv').html("")
                    }
                    if(dy.selfonly)
                    {
                        $('#selfonlybtn').html("公开")
                        $('#selfonlylab').html("仅自己可见")
                    }
                    else{
                        $('#selfonlybtn').html("仅自己可见")
                        $('#selfonlylab').html("公开")
                    }
                    if(dy.iszan)
                    {
                        $("#zanbtn").css("color","#FF8200");
                    }
                    var html="";
                    if(dy.iszhuan)
                    {
                        html+="<em class=\"glyphicon glyphicon-share-alt\"></em>&nbsp;<a onclick='visitor("+dy.dyuserid+")'>@"+dy.realname+"</a>"
                    }
                    $("#iszhuan").html(html);
                    gettotal(dy.id)
                    getzaner(dy.id,0)
                    bian()
                }
                else window.location.href="./login.html"
            }
        })
    }
    function gettotal(dyid){
        $.ajax({
            url: qian+"/zan/gettotal",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            async: false,
            data: {
                dyid: dyid
            },
            success: function (data) {
                var total=data.obj;
                totalpage=parseInt(total/5)+(total%5===0?0:1);
                var html="                    <li onclick='fanye("+dyid+","+(-1)+")'>\n" +
                    "                        <a href=\"#\">Prev</a>\n" +
                    "                    </li>"
                for(var i=1;i<=totalpage;i++)
                {
                    html+="                    <li onclick='fanye("+dyid+","+(i-1)+")'>\n" +
                        "                       <a href=\"#\"> "+i+"</a>\n" +
                        "                    </li>"
                }
                html+="                    <li onclick='fanye("+dyid+","+(-2)+")'>\n" +
                    "                        <a href=\"#\">Next</a>\n" +
                    "                    </li>"
                $('#page').html(html)
            }
        })
    }
    function fanye(dyid,val){
        if(val>=0){
            page=val;
        }
        else if(val===-1)
        {
            page--;
            page=Math.max(0,page);
        }
        else {
            page++;
            page=Math.min(page=Math.min(page,totalpage-1))
        }
        getzaner(dyid,page)
    }
    function getzaner(dyid,page){
        $.ajax({
            url:qian+"/detail/getzaner",
            data:{
                'dyid': dyid,
                'page': page
            },
            async: false,
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    var zans=data.obj;
                    var html=""
                    for(var i=0;i<zans.length;i++){
                        html+="                <tr class=\"success\">\n" +
                            "                    <td style=\"width: 60px;cursor: pointer\">\n" +
                            "                        <img onclick='info(\""+zans[i].id+"\")' src=\""+zans[i].headphoto+"\" style=\"width: 50px;height: 50px;border-radius: 30px\" alt=\"\">\n" +
                            "                    </td>\n" +
                            "                    <td >\n" +
                            "                        <label>"+zans[i].realname+"</label><br>\n" +
                            "                        <label style=\"color: lightslategrey\">"+zans[i].introduction+"</label><br>\n" +
                            "                        <label style=\"color: lightslategrey\">"+zans[i].time+"</label>\n" +
                            "                    </td>\n" +
                            "                    <td align='right'>\n" +
                            "                        <br>\n" +
                            "                                <button id='guanzhu"+i+"' onclick='guanzhu("+zans[i].id+","+i+")' id=\"isfocus\" style=\"border-radius: 25px;width: 100px;height: 50px;background-color: #fff3ed;\" type=\"button\" class=\"btn btn-default\">"
                        html+=zans[i].isfan?(zans[i].isfocuto?"<em class=\"glyphicon glyphicon-transfer\"></em>&nbsp;相互关注": "<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注"):(zans[i].isfocuto?"<em class=\"glyphicon glyphicon-ok\"></em>&nbsp;已关注": "<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注")
                        html+="</button>\n" +
                            "                    </td>\n" +
                            "                </tr>"
                    }
                    $('#table').html(html)

                    for(var i=0;i<zans.length;i++){
                        if(zans[i].isself)
                            $("#"+"td"+i).html("")
                    }

                    if(zans.length==0)
                    {
                        $("#page").html("")
                    }
                }
            }
        })
    }
    function guanzhu(vid,did){
        $.ajax({
            url:qian+ "/focu/guanzhu",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            data: {
                vid: vid
            },
            type:"put",
            dataType: "json",
            success: function (data) {
                if(data.code==200){
                    var arr=data.obj;
                    if(arr[0]==1&&arr[1]==1)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-transfer\"></em>&nbsp;相互关注")
                    else if(arr[0]==1&&arr[1]==0)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注")
                    else if(arr[0]==0&&arr[1]==1)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-ok\"></em>&nbsp;已关注")
                    else if(arr[0]==0&&arr[1]==0)
                        $('#guanzhu'+did).html("<em class=\"glyphicon glyphicon-plus\"></em>&nbsp;加关注")
                }
            }
        })
    }
    function dianzan(dyid,userid,dyname,){
        $.ajax({
            url:qian+"/zan/dianzan",
            data:{
                'dyid': dyid,
                'userid': userid,
                'dyname': dyname,
            },
            type: "put",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    if(data.obj)
                    {
                        $("#zanbtn").css("color","#FF8200");
                        $("#zan").html(parseInt($("#zan").html())+1);
                    }
                    else {
                        $("#zanbtn").css("color","#333333");
                        $("#zan").html(parseInt($("#zan").html())-1);
                    }
                }
            }
        })
    }
    function visitor(vid){
        if(vid==localStorage.getItem('id'))window.location.href="./index.html";
        window.location.href="./visitor.html?vid="+vid+"";
    }
    function setself(dyid){
        $.ajax({
            url:qian+"/detail/getself",
            data:{
                'dyid': dyid,
            },
            type:"put",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    if(data.obj)
                    {
                        $('#selfonlybtn').html("公开")
                        $('#selfonlylab').html("仅自己可见")
                    }
                    else{
                        $('#selfonlybtn').html("仅自己可见")
                        $('#selfonlylab').html("公开")
                    }
                }
            }
        })
    }
    function deletedy(dyid,iszhuan){
        $.ajax({
            url:qian+"/detail/deletedy",
            data:{
                'dyid': dyid,
                'iszhuan': iszhuan
            },
            type: "delete",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    alert("删除成功")
                    window.location.href=window.location.href="./index.html"
                }
                else{
                    alert("删除失败")
                }
            }
        })
    }
    function info(val){
        if(localStorage.getItem('id')==val)window.location.href="./index.html"
        else window.location.href="./visitor.html?vid="+val
    }
</script>
</html>